<template>
	<view>
		<view class="commentbox">
			<!-- <view class="commentname">
				<view>宝贝评论(2341）</view>
				<view class="morebox">
					<view>更多</view>
					<image src="../static/jt.png"></image>
				</view>
			</view> -->
			<view class="commentlist" v-for="(item,index) in list" :key="index">
				<view class="commentinfo">
					<view class="personbox">
						<view class="logobox">
							<image :src="item.anonymity==1?item.wxPhotoURL:'../static/default-avatar.png'"></image>
						</view>
						<view class="infobox">
							<!-- anonymity 1不匿名 2匿名 -->
							<view class="namebox">{{item.anonymity==1?item.wxName:'微信用户'}}</view>
							<view class="starbox">
								<view class="star">
									<uni-rate :readonly="true" :value="item.stars" size="16" />
								</view>
							</view>
							<!-- <view class="actstar">
								<view class="star" v-for="(sitem,sindex) in 3" :key="sindex">
									<image src="../static/image/xx1.png"></image>
								</view>
							</view> -->
						</view>
					</view>
					<view class="timebox">{{dateFormat(item.create_time)}}</view>
				</view>
				<view class="wordbox">
					{{item.content}}
				</view>
				<view class="commentimg">
					<view class="imgbox" v-for="(imgitem,imgindex) in item.picarr.split(',')" :key="imgindex">
						<image :src="imgitem"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"comment",
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			dateFormat: function(value) {           
			                var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			                var year = date.getFullYear();
			                var month = ("0" + (date.getMonth() + 1)).slice(-2);
			                var sdate = ("0" + date.getDate()).slice(-2);
			                var hour = ("0" + date.getHours()).slice(-2);
			                var minute = ("0" + date.getMinutes()).slice(-2);
			                var second = ("0" + date.getSeconds()).slice(-2);
			                // 拼接
			                var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
			                // 返回
			                return result;
			            },
		}
	}
</script>

<style lang="scss" scoped>
	.commentbox{
		width: 650rpx;
		padding: 0 20rpx;
		margin: 0 auto;
		background-color: #FFF;
		.commentname{
			padding: 40rpx 0 0 0 ;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #333333;
			.morebox{
				color: #888888;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				image{
					width: 11rpx;
					height: 19rpx;
					margin-left: 16rpx;
				}
			}
		}
		.commentlist{
			margin-top: 40rpx;
			.commentinfo{
				display: flex;
				justify-content: space-between;
				.personbox{
					display: flex;
					align-items: center;
					.logobox{
						margin-right: 16rpx;
						image{
							width: 70rpx;
							height: 70rpx;
							border-radius: 100%;
						}
					}
					.infobox{
						.namebox{
							width: 300rpx;
							font-size: 30rpx;
							font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
							font-weight: normal;
							color: #222222;
							-webkit-line-clamp: 1;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.starbox{
							display: flex;
							align-items: center;
							image{
								width: 24rpx;
								height: 24rpx;
								margin-right: 6rpx;
							}
						}
						.actstar{
							position: absolute;
							display: flex;
							align-items: center;
							margin-top: -41rpx;
							image{
								width: 25rpx;
								height: 25rpx;
								margin-right: 6rpx;
							}
						}
					}
				}
				.timebox{
					font-size: 24rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #555555;
				}
			}
			.wordbox{
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #333333;
				margin: 24rpx 0 30rpx 0;
			}
			.commentimg{
				display: flex;
				flex-wrap: wrap;
				.imgbox{
					width: 33.3%;
					text-align: center;
					image{
						width: 210rpx;
						height: 210rpx;
						margin-bottom: 5rpx;
					}
				}
			}
		}
	}
	

</style>